<template>
	<view class="container">
		<view class="padding">
			<com-head textTit="积分中心" :typeVal="1" :scrollTop="scrollTop"></com-head>
			
			<view class="popMain">
				<view class="popMain-integral" @click="toClick">可用积分 <u-icon name="question-circle" color="#999999" size="30"></u-icon></view>
				<view class="popMain-num">{{userInfo.integral}}</view>
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xing66.png"></image>
			</view>
		</view>
		
		<view class="list">
			<view class="list__title">推荐商品</view>
			<view class="ls">
				<view class="ls__view" v-for="(ele,index) in goodsList" @click="goDetails(ele)">
					<image class="ls__view-img" :src="ele.picture[0]"></image>
					<view class="ls__view-dec">
						<text class="ls__view-dec-title">{{ele.title}}</text>
						<text class="ls__view-dec-num">已售{{ele.sale_volume}}件</text>
					</view>
					<view class="ls__view-num"><text>￥{{ele.sku[0].sale_price}} +  </text>  {{ele.min_integral_price}}  <text class="ji">积分</text></view>
				</view>
				
				<view class="empty" style="text-align: center; margin-top: 146rpx;" v-if="!goodsList.length">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" style="width: 256rpx;height: 176rpx;"></image>
					<view style="font-size: 24rpx;color: #AFB5BF; padding: 70rpx 0 80rpx 0;">暂无数据</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:0,
				page:1,
				goodsList: [],
				scrollTop: 0
			}
		},
		onLoad() {
			this.getGoods()
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.total > this.goodsList.length) {
				this.page++;
				this.getShopList();
			}
		},
		methods: {
			goDetails(ele){
				this.utlis.goUrl(`/pages/shop/shopInfo?goods_id=${ele.id}`)
			},
			// 商品列表
			async getGoods(){
				let {code,data} = await this.$u.api.getGoods({type: 2});
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					data.data.forEach((ele)=>{
						ele.picture = ele.picture.split(',')
					})
					this.goodsList = [...this.goodsList, ...data.data];
					this.total = data.total;
					if (this.total <= this.goodsList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			toClick() {
				this.toast('可用（积分、金额+积分）兑换商品')
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 50rpx 0;
}
.padding{
	padding: 0 32rpx;
}
.list{
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	padding: 34rpx 32rpx;
	&__title{
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
	}
	.ls{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		&__view{
			margin-top: 25rpx;
			&-img{
				width: 331rpx;
				height: 243rpx;
			}
			&-dec{
				display: flex;
				margin-top: 18rpx;
				&-title{
					flex: 1;
					color: #242833;
					font-size: 26rpx;
				}
				&-num{
					font-size: 20rpx;
					color: #999999;
				}
			}
			&-num{
				color: #007664;
				font-size: 36rpx;
				margin-top: 12rpx;
				margin-bottom: 5rpx;
				font-weight: bold;
				.ji{
					font-size: 20rpx;
					margin-left: 8rpx;
					font-weight: 400;
				}
			}
		}
	}
}
.popMain{
	position: relative;
	&-integral{
		font-size: 28rpx;
		color: #999999;
		margin-top: 40rpx;
		u-icon{
			margin-left: 5rpx;
		}
	}
	&-num{
		font-size: 72rpx;
		color: #007664;
		font-weight: bold;
	}
	image{
		position: absolute;
		bottom: -40rpx;
		right: 0;
		width: 203rpx;
		height: 203rpx;
	}
}
</style>
